<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--required-->
  <!--核心库-->
  <script src="../lib/vue.min.js"></script>
  <script src="../lib/utils/axios.min.js"></script>
  <script src="../lib/utils/es6-promise.auto.min.js"></script>
  <!--必须的自定义组件-->
  <!--bin-ui-->
  <link rel="stylesheet" href="../lib/bin-ui/styles/index.css">
  <script src="../lib/bin-ui/bin-ui.min.js"></script>
  <!--自定义组件-->
  <script src="../components/dist/dot-label.min.js"></script>
  <!--self-->
  <link rel="stylesheet" href="../styles/index.css">
  <!--测试模拟请求-->
  <script src="../mock/mock.js"></script>
  <script src="../mock/main.js"></script>
  <script src="../lib/echarts/echarts.min.js"></script>
  <script src="../lib/bin-charts/bin-charts.min.js"></script>

  <script src="../lib/bin-ace-editor/src-min-noconflict/ace.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/ext-beautify.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/ext-language_tools.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/mode-json.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/snippets/json.js"></script>

  <script src="../lib/bin-ace-editor/bin-ace-editor.min.js"></script>
</head>
<body>
<div id="app">
  <div class="main">
    <b-button @click="onClick">测试按钮</b-button>
    <b-dot-label v-if="msg" type="circle">{{msg}}</b-dot-label>
    <br> <br>
    <div id="chart1" style="width: 100%;height: 100%;padding-top:15px;position: relative;">
      <b-charts height="350px" :options="lineChartOption"></b-charts>
    </div>
    <br> <br>
    <b-ace-editor v-model="jsonStr" lang="json" width="100%" height="300"></b-ace-editor>
    <br> <br>
    <b-table :columns="columns" :data="data"></b-table>
  </div>
</div>

<script>
  var jsonData = {
    title: '测试json数据',
    child: [
      {
        title: '子项名称1',
        desc: '子项描述1'
      },
      {
        title: '子项名称2',
        desc: '子项描述2'
      }
    ]
  }
  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        jsonStr: JSON.stringify(jsonData, null, 2),
        msg: '',
        columns: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '出生日期',
            key: 'birthday'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data: [
          {
            name: '王小明',
            age: 18,
            birthday: '919526400000',
            address: '北京市朝阳区芍药居'
          },
          {
            name: '张小刚',
            age: 25,
            birthday: '696096000000',
            address: '北京市海淀区西二旗'
          },
          {
            name: '李小红',
            age: 30,
            birthday: '563472000000',
            address: '上海市浦东新区世纪大道'
          },
          {
            name: '周小伟',
            age: 26,
            birthday: '687024000000',
            address: '深圳市南山区深南大道'
          },
          {
            name: '张小发',
            age: 33,
            birthday: '23232000000',
            address: '南京市龙眠大道'
          }
        ],
        lineChartOption: {
          tooltip: { trigger: 'axis' },
          title: { text: '默认折线图' },
          grid: { top: 80, right: 30 },
          xAxis: {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          },
          yAxis: { type: 'value' },
          series: [{
            type: 'line',
            name: '数量',
            data: [220, 315, 213, 432, 566, 143, 567, 356, 1200, 332, 900, 1010]
          }]
        }
      }
    },
    methods: {
      onClick: function () {
        this.$log.print('测试发起请求')
        axios.get('/demo').then(function (response) {
          vm.$log.print('测试请求成功', 'success')
          vm.$log.print(response.data.msg, 'danger')
          vm.msg = response.data.msg
        })
      }
    }
  })
</script>
</body>
</html>
